// 扩展职位数据，添加更多详细信息
const jobs = [
  {
    id: 1,
    title: "客服专员",
    salary: "4-7K",
    tags: ["1-3年", "大专", "线上客服", "弹性工作制"],
    company: "大连科技有限公司",
    location: "大连沙河口区黄河路22号",
    recruiter: {
      name: "刘女士",
      title: "人事经理",
      lastActive: "刚刚活跃",
    },
    companyInfo: {
      name: "大连科技有限公司",
      tags: ["互联网", "1000-9999人", "D轮及以上"],
      description: "商品交易平台",
    },
    requirements: [
      "1. 常青藤商城、有赞、京东等平台的售前、售后客服工作",
      "2. 直播客服工作，引导直播间客户下单",
      "3. 处理平台投诉、纠纷订单",
      "4. 每日完成KPI业绩任务，提升服务质量",
    ],
    qualifications: [
      "1. 电子商务、营销类相关专业优先",
      "2. 有电商平台客服工作经验优先",
      "3. 有良好的服务意识和沟通能力",
      "4. 能适应倒班工作制",
    ],
    address: "大连",
  },
  {
    id: 2,
    title: "产品经理",
    salary: "8-12K",
    tags: ["3-5年", "本科", "产品规划", "周末双休"],
    company: "大连科技创新有限公司",
    location: "大连 沙河口区 黄河路",
    recruiter: {
      name: "王经理",
      title: "招聘主管",
      lastActive: "刚刚活跃",
    },
    companyInfo: {
      name: "大连科技创新有限公司",
      tags: ["互联网", "500-1000人", "C轮融资"],
      description: "科技创新及软件开发公司",
    },
    requirements: [
      "1. 负责产品规划、需求分析和设计文档的撰写",
      "2. 与开发团队沟通，确保项目进展顺利",
      "3. 定期收集和分析市场信息，优化产品功能",
      "4. 定期与用户进行沟通，改进产品",
    ],
    qualifications: [
      "1. 本科及以上学历，计算机相关专业优先",
      "2. 至少3年以上产品经理经验，具有互联网行业经验优先",
      "3. 具备较强的沟通协调能力",
      "4. 具备较强的产品设计与数据分析能力",
    ],
    address: "大连沙河口区黄河路22号(沙河口地铁站附近)",
  },
  {
    id: 3,
    title: "前端开发工程师",
    salary: "10-15K",
    tags: ["1-3年", "本科", "Web开发", "五险一金"],
    company: "大连云睿科技有限公司",
    location: "大连 高新园区 大连软件园",
    recruiter: {
      name: "赵女士",
      title: "技术招聘负责人",
      lastActive: "刚刚活跃",
    },
    companyInfo: {
      name: "大连云睿科技有限公司",
      tags: ["互联网", "200-500人", "B轮融资"],
      description: "专注于云计算和人工智能技术的公司",
    },
    requirements: [
      "1. 负责Web前端页面的开发与维护",
      "2. 熟练使用Vue、React等前端框架",
      "3. 配合后端开发人员进行接口对接",
      "4. 优化前端性能，提高用户体验",
    ],
    qualifications: [
      "1. 本科及以上学历，计算机相关专业优先",
      "2. 至少1年以上前端开发经验，熟悉常见的前端开发框架",
      "3. 良好的沟通能力，能够独立解决问题",
      "4. 对技术有浓厚兴趣，具备良好的学习能力",
    ],
    address: "大连高新园区软件园A座(高新园区地铁站附近)",
  },
  {
    id: 4,
    title: "市场营销经理",
    salary: "12-18K",
    tags: ["5年以上", "本科", "市场拓展", "双休"],
    company: "大连达维科技有限公司",
    location: "大连 中山区 新业大厦",
    recruiter: {
      name: "李先生",
      title: "人力资源主管",
      lastActive: "刚刚活跃",
    },
    companyInfo: {
      name: "大连达维科技有限公司",
      tags: ["科技", "100-500人", "A轮融资"],
      description: "以创新科技为核心的高科技公司",
    },
    requirements: [
      "1. 负责公司市场推广及产品宣传策划",
      "2. 组织市场调研，分析客户需求",
      "3. 负责渠道拓展，建立合作伙伴关系",
      "4. 撰写市场分析报告，制定营销策略",
    ],
    qualifications: [
      "1. 本科及以上学历，市场营销或相关专业",
      "2. 至少5年以上市场营销管理经验",
      "3. 具有较强的沟通能力和团队合作精神",
      "4. 具有较强的策划和执行能力",
    ],
    address: "大连中山区新业大厦(中山广场地铁站附近)",
  },
];

// 生成职位列表
const jobList = document.getElementById("jobList");
const jobDetail = document.getElementById("jobDetail");

function renderJobList() {
  jobList.innerHTML = "";
  jobs.forEach(job => {
    const jobCard = document.createElement("div");
    jobCard.className = "job-card";
    jobCard.onclick = () => showJobDetail(job);
    jobCard.innerHTML = `
                    <div class="job-title">
                        <span class="job-name">${job.title}</span>
                        <span class="job-salary">${job.salary}</span>
                    </div>
                    <div class="job-tags">
                        ${job.tags
                          .map(tag => `<span class="job-tag">${tag}</span>`)
                          .join("")}
                    </div>
                    <div class="company-info">
                        <div class="company-logo"></div>
                        <div>
                            <div>${job.company}</div>
                            <div style="color: #666; font-size: 12px;">${
                              job.location
                            }</div>
                        </div>
                    </div>
                `;
    jobList.appendChild(jobCard);
  });
}

function showJobDetail(job) {
  // 移除其他职位卡片的选中状态
  document
    .querySelectorAll(".job-card")
    .forEach(card => card.classList.remove("selected"));
  // 添加当前职位卡片的选中状态
  event.currentTarget.classList.add("selected");

  jobDetail.innerHTML = `
                <div class="job-detail-header">
                    <div>
                        <div class="job-detail-title">${job.title}</div>
                        <div class="job-detail-salary">${job.salary}</div>
                        <div class="job-detail-tags">
                            ${job.tags
                              .map(tag => `<span class="job-detail-tag">${tag}</span>`)
                              .join("")}
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">立即沟通</button>
                        <button class="btn btn-outline">感兴趣</button>
                    </div>
                </div>

                <div class="recruiter-info">
                    <div class="recruiter-avatar"></div>
                    <div>
                        <div class="recruiter-name">${job.recruiter.name}</div>
                        <div class="recruiter-title">${job.recruiter.title} · ${
    job.recruiter.lastActive
  }</div>
                    </div>
                </div>

                <div class="company-detail">
                    <div class="company-name">${job.companyInfo.name}</div>
                    <div class="company-tags">
                        ${job.companyInfo.tags
                          .map(tag => `<span class="company-tag">${tag}</span>`)
                          .join(" | ")}
                    </div>
                    <div>${job.companyInfo.description}</div>
                </div>

                <div class="job-description">
                    <h3>工作内容</h3>
                    ${job.requirements.map(req => `<p>${req}</p>`).join("")}
                    
                    <h3>任职要求</h3>
                    ${job.qualifications.map(qual => `<p>${qual}</p>`).join("")}
                </div>

                <div class="location-info">
                    <h3>工作地址</h3>
                    <div>${job.address}</div>
                    <div class="map-container">地图区域</div>
                </div>
            `;
}

// 初始化页面
renderJobList();
// 默认显示第一个职位的详情
showJobDetail(jobs[0]);
